<template>
  <div class="activity-yingdou">
    <div class="activity-yingdou-bg">
      <img :src="bg" alt="春季活动">
    </div>
    <ul class="activity-yingdou-register" :style="{top: registerHeight + 'px'}">
      <li class="activity-yingdou-register-info">
        <p>注册即送1288元现金红包</p>
      </li>
      <li class="activity-yingdou-register-phone">
        <img src="./phone.png" alt="手机号">
        <input type="number" v-model="loginName" placeholder="请输入手机号">
      </li>
      <li class="activity-yingdou-register-sms">
        <div>
          <img src="./sms.png" alt="验证码"> 
          <input type="number" placeholder="请输入验证码" v-model="smsCode">
        </div>

        <div @click="getSmsCode">
          <span v-show="smsState === 'init'">获取验证码</span>
          <span v-show="smsState === 'loading'">{{ countDown }}s</span>
          <span v-show="smsState === 'finished'">重新获取</span>
        </div>
      </li>
      <li class="activity-yingdou-register-password">
        <img src="./signup.png" alt="密码"> 
        <input type="text" placeholder="请设置登录密码" v-model="password" />
      </li>
      <li class="activity-yingdou-register-btn" @click="register"><p>马上领取</p></li>
      <p class="activity-yingdou-register-login">
        <span>市场有风险，选择需谨慎</span>
        <span @click="toLogin">已注册 立即登录>></span>
      </p>
    </ul>
    <div class="activity-yingdou-btn" :style="{top: btnHeight + 'px'}">
      <div class="btn">
        <span @click="invest()">立即出借</span>
      </div>
    </div>
  </div>
</template>

<script>
  import { Toast, Indicator } from 'mint-ui'

  export default {
    data () {
      return {
        bg: require('./bg_yingdou.jpg'),
        w: 0,
        h: 0,
        loginName: '',
        smsCode: '',
        password: '',
        countDown: 60,
        smsState: 'init', // init || loading || finished
        invitNum: '',
        inviteCode: '',
        timer: null
      }
    },
    computed: {
      btnHeight () {
        return (2870 / 4589) * this.h
      },
      registerHeight () {
        return (374 / 4589) * this.h
      }
    },
    methods: {
      invest () {
        window.scrollTo(0, 0)
      },
      toLogin () {
        this.$router.push('/login')
      },
      startCountDown () {
        if (this.smsState === 'loading') {
          return
        }
        this.countDown = 60
        this.smsState = 'loading'
        this.timer = setInterval(() => {
          this.countDown--
          if (this.countDown === 0) {
            clearInterval(this.timer)
            this.smsState = 'finished' // 60s结束
          }
        }, 1000)
      },
      getSmsCode () {
        if (!(/^1[34578]\d{9}$/.test(this.loginName))) {
          Toast('请输入正确的手机号')
          this.smsState = 'init'
          return
        }
        this.$http.post('/api/regist/sendSmsCode', 'loginName=' + this.loginName)
          .then((response) => {
            if (response.data.retCode === '0000') {
              this.startCountDown()
            } else {
              Toast(response.data.errorDesc)
              this.smsState = 'finished'
              return
            }
          })
          .catch((err) => {
            console.log(err)
            this.smsState = 'finished'
          })
      },
      register () {
        const vm = this
        if (this.password.length === 0) {
          Toast('请输入6到18位的密码')
          return
        }
        if (this.smsCode.length !== 6) {
          Toast('请输入正确短信验证码')
          return
        }
        Indicator.open('注册中...')
        this.$http.post('/api/regist', 'loginName=' + this.loginName + '&smsCode=' + this.smsCode + '&password=' + this.password + '&channelCode=1&invitNum=' + this.invitNum + '&inviteCode=' + this.inviteCode)
          .then((response) => {
            if (response.data.retCode === '0000') {
              Indicator.close()
              Toast({
                message: response.data.errorDesc,
                iconClass: ' mintui-success',
                className: 'toastMes',
                duration: 200
              })
              // 自动登录
              Indicator.open('登录中...')
              vm.$http.get(`/api/login?loginName=${vm.loginName}&password=${vm.password}`)
                .then((response) => {
                  if (response.data.retCode === '0000') {
                    vm.$cookie.set('acctKey', response.data.data, {
                      expires: '7D'
                    })
                    console.log(response.data)
                    Indicator.close()
                    console.log('获取数据成功')
                    vm.$router.push('/mine?from=register')
                  } else {
                    Indicator.close()
                    Toast(response.data.errorDesc)
                  }
                })
                .catch((err) => {
                  console.log(err)
                })
              .catch((err) => {
                Indicator.close()
                console.log('err啊', err.message)
                console.log(err.config)
              })
            } else {
              Indicator.close()
              Toast(response.data.errorDesc)
            }
          })
          .catch((err) => {
            console.log(err)
            Indicator.close()
            this.smsState = 'finished'
          })
      }
    },
    created () {
      this.w = document.documentElement.clientWidth
      this.h = this.w * (4589 / 750)
      if (this.$route.query['invitNum'] !== undefined && this.$route.query['invitNum'] !== '') {
        this.invitNum = this.$route.query['invitNum']
      }
      if (this.$route.query['c'] !== undefined && this.$route.query['c'] !== '') {
        this.inviteCode = this.$route.query['c']
      }
    },
    destroyed () {
      this.timer = null
    }
  }
</script>

<style lang='scss'>
  .activity-yingdou {
    font-family: 'Microsoft YaHei', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    position: relative;
    font-size: 0;
    input {
      outline: none;
    }
    &-bg {
      img {
        width: 100%;
      }
    }
    &-register {
      position: absolute;
      width: 100%;
      padding-top: 30px;

      img {
        width: (40vw/7.5);
        height: (40vw/7.5);
      }
      &-info {
        font-size: (30vw/7.5);
        color: #fff;
        text-align: center;
        margin-bottom: (45vw/7.5);
      }
      &-phone,
      &-password,
      &-btn {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding: 0 (46vw/7.5);
        width: (586vw/7.5);
        height: (92vw/7.5);
        margin: 0 auto;
        border-radius: (92vw/7.5);
        background: #fff;
        margin-bottom: (20vw/7.5);
        input {
          flex: 1 0 auto;
          height: 100%;
          z-index: 1000;
          font-size: (26vw/7.5);
          border: none;
          text-indent: (10vw/7.5);
        }
      }
      &-btn {
        background: url('./btn@2x.png') 0 0 no-repeat;
        background-size: cover;
        text-align: center;
        line-height: (92vw/7.5);
        font-size: (30vw/7.5);
        color: #e6385b;
        p {
          width: 100%;
        }
      }
      &-sms {
        font-size: 0;
        display: flex;
        align-items: center;
        width: (586vw/7.5);
        height: (92vw/7.5);
        margin: 0 auto;
        border-radius: (92vw/7.5);
        margin-bottom: (20vw/7.5);
        justify-content: space-between;
        div {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          padding: 0 (46vw/7.5);
          height: (92vw/7.5);
          border-radius: (92vw/7.5);
          background: #fff;
          &:nth-child(1) {
            width: 60%;
          }
          &:nth-child(2) {
            width: 36%;
            background: #ffd255;
            font-size: (26vw/7.5);
            color: #e6385b;
            text-align: center;
            padding: 0 (26vw/7.5);
            span {
              width: 100%;
            }
          }
        }
        input {
          width: 100%;
          height: 100%;
          z-index: 1000;
          font-size: (26vw/7.5);
          border: none;
          text-indent: (10vw/7.5);
        }
      }
      &-login {
        display: flex;
        justify-content: space-between;
        font-size: (24vw/7.5);
        width: (586vw/7.5);
        margin: 0 auto;
        color: #fff;
      }
    }
    &-btn {
      position: absolute;
      width: 100%;
      text-align: center;
      z-index: 100;
      .btn {
        width: 40%;
        margin: 0 auto;
        span {
          display: block;
          width: 100%;
          height: 10vw;
          line-height: 11vw;
          color: #fff;
          text-decoration: none;
          background: #f9173d;
          border-radius: 10vw;
          font-size: 4vw;
        }
      }
    }
  }
</style>
